<template>
	<el-card class="recharge-card" shadow="never">
		<!-- 顶部标题栏 -->
		<div class="recharge-title-bar">
			<span>充值永恒币</span>
			<el-button type="warning" plain size="small" @click="paySuccessBtn">返回</el-button>
		</div>

		<!-- 账户信息 -->
		<div class="account-info">
			账号：{{ userStore.userInfo.mobile }} 余额：{{ userStore.userInfo.user_coin }}
		</div>

		<!-- 选择充值数量 -->
		<div class="section-container">
			<div class="section-label">选择充值永恒币数量:</div>
			<el-radio-group v-model="selectedAmountId" class="amount-options-grid">
				<el-row :gutter="15">
					<el-col v-for="option in rechargeOptions" :key="option.type" :span="8" style="margin-bottom: 10px;"
						@click="selectPayItem(option)">
						<div class="amount-option" :class="{ 'is-selected': selectedAmountId == option.type }"
							@click="selectedAmountId = option.type">
							<div class="amount-price">
								<span class="amount">{{ option.coin }}永恒币</span>, {{ option.price }}元
							</div>
							<div class="bonus-text" v-if="option.trip != ''">({{ option.trip }})</div>
						</div>
					</el-col>
				</el-row>
			</el-radio-group>
		</div>

		<!-- 选择支付方式 -->
		<div class="section-container">
			<div class="section-label">选择支付方式:</div>
			<el-radio-group v-model="selectedPaymentMethod" class="payment-options">
				<div v-for="method in paymentMethods" :key="method.id" class="payment-option"
					:class="{ 'is-selected': selectedPaymentMethod === method.id }"
					@click="selectedPaymentMethod = method.id">
					<!-- 实际项目中应使用真实的图标路径 -->
					<img :src="method.iconSrc" :alt="method.name" class="payment-icon" />
					<span>{{ method.name }}</span>
				</div>
			</el-radio-group>
		</div>

		<!-- 确认按钮 -->
		<div class="confirm-button-container">
			<el-button class="confirm-button" @click="confirmRecharge">确认充值支付</el-button>
			<!-- <transition name="el-zoom-in-left"> -->
				<div class="pay-container" v-show="isShowPayCodeImage">
					<div class="pay-container-left">
						<img src="@/assets/images/PaymentGuidance.jpg" alt="">
					</div>
					<div class="pay-container-right">
						<div class="pay-container-right-title">
							<p>支付金额：￥{{ selectedOption?.price }}</p>
							<p>请打开微信扫码完成支付</p>
						</div>
						<div class="pay-container-right-content">
							<el-image :src="payInfo?.img_url" fit="contain" style="width: 100%;height: 100%;border: 1px solid #eee;"/>
						</div>

						<div class="pay-container-right-button">
							<el-button type="primary" size="small" @click="paySuccessBtn">支付完成</el-button>
							<el-button type="info" plain size="small" @click="closePayBox">返回</el-button>
						</div>
					</div>
				</div>
			<!-- </transition> -->
			
		</div>

		<!-- 说明文字 -->
		<div class="explanation-notes">
			<strong>说明：</strong>
			<ol>
				<li v-for="(note, index) in explanationNotes" :key="index">
					{{ note }}
					<!-- 特殊处理第一个说明里的链接 -->
					<el-link v-if="index === 0" type="primary" :underline="false"
						@click="viewCoinInfo">（查看永恒币说明）</el-link>
				</li>
			</ol>
		</div>
		<el-dialog v-model="dialogVisible" title="永恒币说明" width="30%" center>
			<div v-html="coinInfo"></div>
		</el-dialog>
	</el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, toRaw } from 'vue';
import { useRouter } from 'vue-router';
import { apiRechargeCreate, apiRechargeCoin_config, apiPayPrepay } from '@/api/pay';
import wechatIcon from '@/assets/images/wechat-icon.png'
import useUserStore from '@/stores/modules/user'
const userStore = useUserStore()
const router = useRouter();
const isShowPayCodeImage = ref(false)
// --- 类型定义 ---
interface RechargeOption {
	coin: number;
	price: number;
	trip: string;
	type: number,
}

interface PaymentMethod {
	id: number;
	name: string;
	iconSrc: string; // 图标路径
}

// --- 响应式状态 ---
const accountNumber = ref('15116908287');
const currentBalance = ref(0);
const selectedAmountId = ref<number | string>(); // 当前选中的充值金额 ID
const selectedPaymentMethod = ref<number>(2); // 默认选中支付宝

// 充值选项数据 (根据截图填写)
const rechargeOptions = ref([]);

// 支付方式数据 (需要提供图标路径)
// 请将 'placeholder-icon-*.png' 替换为真实的图标文件路径
const paymentMethods = ref<PaymentMethod[]>([
	// { id: '1', name: '支付宝', iconSrc: '/path/to/alipay-icon.png' }, // 替换为你的支付宝图标路径
	{ id: 2, name: '微信支付', iconSrc: wechatIcon }, // 替换为你的微信支付图标路径
]);

// 说明文字
const explanationNotes = ref<string[]>([
	'“永恒币”，用于网上墓园献祭品、扫墓等用途。', // 在模板中处理链接
	'永恒币兑换后无法退回。',
	'永恒币不能用于升级纪念馆，升级纪念馆请前往“管理纪念馆”栏目升级。',
]);

// --- 方法 ---

const payInfo = ref()
const selectedOption = ref()
const confirmRecharge = () => {
	if (!selectedAmountId.value) {
		alert('请选择充值数量！');
		return;
	}
	if (!selectedPaymentMethod.value) {
		alert('请选择支付方式！');
		return;
	}
	console.log(toRaw(rechargeOptions.value), toRaw(selectedAmountId.value), toRaw(selectedPaymentMethod.value))
	selectedOption.value = rechargeOptions.value.find(opt => opt.type === selectedAmountId.value);
	console.log(`确认充值: ${selectedOption.value?.coin} 永恒币 (${selectedOption.value?.price}元), 支付方式: ${selectedPaymentMethod.value}`);
	// alert('确认充值 (模拟)');
	let obj = {
		type: '2',
		coin_type: Number(selectedAmountId.value),
		pay_way: selectedPaymentMethod.value,
	}
	apiRechargeCreate(obj).then((res: any) => {
		console.log(res)
		apiPayPrepay({
			terminal: 4,
			order_id: res.order_id,
			pay_way: selectedPaymentMethod.value,
		}).then( async (res: any) => {
			console.log(res)
			isShowPayCodeImage.value = true
			payInfo.value = res

			await userStore.getUserInfoFun()
		})
	})
	// 在这里实现调用支付接口的逻辑
};

const viewCoinInfo = () => {
	console.log('查看永恒币说明');
	alert('查看永恒币说明 (模拟)');
	// 跳转到永恒币说明页面或显示弹窗
}


const selectPayItem = (option: RechargeOption) => {
	selectedAmountId.value = option.type
	
}

// 获取永恒币充值配置
const getTianBiConfig = async () => {
	apiRechargeCoin_config().then((res: any) => {
		console.log(res)
		rechargeOptions.value = res
	})
}

// 方法
const emit = defineEmits<{
	(e: 'back-to-list', from: string): void;
}>();
const paySuccessBtn = () => {
	emit('back-to-list', 'payInfo');
}
const closePayBox = () => {
	isShowPayCodeImage.value = false
}
onMounted(() => {
	getTianBiConfig()
})
</script>

<style scoped>
.recharge-card {
	border: 1px solid #e4e7ed;
	box-shadow: none;
	padding: 0;
	/* 移除卡片内边距 */
	background-color: #fff;
}

.recharge-title-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fdf6ec;
	/* 淡黄色背景 */
	color: #E6A23C;
	/* 橙色文字 */
	padding: 8px 15px;
	font-size: 14px;
	font-weight: bold;
	border-bottom: 1px solid #f5dab1;
	/* 稍深的边框 */
}

/* 返回按钮样式 */
.recharge-title-bar .el-button {
	/* Element Plus plain warning button already looks similar */
}

.account-info {
	padding: 10px 15px;
	font-size: 14px;
	color: #606266;
	border-bottom: 1px dashed #e4e7ed;
	/* 分隔虚线 */
	margin-bottom: 20px;
}

.section-container {
	padding: 0 15px;
	/* 左右内边距 */
	margin-bottom: 25px;
	/* 区域间距 */
}

.section-label {
	font-size: 14px;
	color: #303133;
	margin-bottom: 15px;
	font-weight: 600;
}

.amount-options-grid {
	display: block;
	/* 让 RadioGroup 占满，方便内部 Row/Col */
}

.amount-option {
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	padding: 15px 10px;
	/* 增加垂直内边距 */
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	background-color: #f9f9f9;
	/* 默认浅灰色背景 */
	min-height: 70px;
	/* 保证选项有一定高度 */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.amount-option:hover {
	border-color: #c0c4cc;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.amount-option.is-selected {
	border: #ff9900 1px solid;
	/* border-color: #f56c6c; */
	/* 选中时用红色边框 */
	background-color: #FFFFEE;
	/* 选中时用白色背景 */
	box-shadow: 0 2px 8px rgba(245, 108, 108, 0.2);
}

.amount-price {
	font-size: 14px;
	color: #303133;
	margin-bottom: 5px;
}

.amount-price .amount {
	color: #f56c6c;
	/* 红色金额 */
	font-weight: bold;
	font-size: 16px;
	/* 稍大字体 */
	margin-right: 5px;
}

.bonus-text {
	font-size: 12px;
	color: #909399;
}

.payment-options {
	display: flex;
	gap: 15px;
	/* 支付方式间距 */
}

.payment-option {
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	background-color: #f9f9f9;
}

.payment-option:hover {
	border-color: #c0c4cc;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.payment-option.is-selected {
	border-color: #E6A23C;
	/* 支付宝/选中时的橙色边框 */
	background-color: #fff;
	box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2);
}

.payment-icon {
	width: 24px;
	/* 控制图标大小 */
	height: 24px;
	margin-right: 10px;
	vertical-align: middle;
	/* 尝试垂直对齐 */
}

.payment-option span {
	font-size: 14px;
	color: #303133;
}

.confirm-button-container {
	padding: 0 15px;
	margin-bottom: 25px;
	position: relative;
}

.confirm-button {
	width: 200px;
	/* 固定宽度 */
	height: 40px;
	/* 固定高度 */
	font-size: 16px;
	/* 稍大字体 */
	background-color: #f39c12;
	/* 橙色背景 */
	border-color: #f39c12;
	color: #fff;
	/* Element Plus 按钮默认居中，如果需要调整，可以在容器上设置 text-align: center; */
}

.confirm-button:hover {
	background-color: #e68e0b;
	border-color: #e68e0b;
}

.explanation-notes {
	padding: 15px;
	background-color: #f5f7fa;
	/* 浅灰色背景 */
	border-top: 1px solid #e4e7ed;
	font-size: 12px;
	color: #606266;
	line-height: 1.8;
}

.explanation-notes strong {
	color: #303133;
	font-weight: 600;
}

.explanation-notes ol {
	padding-left: 20px;
	/* 列表缩进 */
	margin: 5px 0 0 0;
}

.explanation-notes li {
	margin-bottom: 3px;
}

.explanation-notes .el-link {
	font-size: 12px;
	/* 链接字体大小与文本一致 */
	vertical-align: baseline;
	/* 尝试对齐链接 */
}

.pay-container{
	width: 560px;
	height: 540px;
	padding: 20px 30px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: absolute;
	left: 240px;
	top: -300px;
	z-index: 9999;
	background-color: #ffffff;
	box-shadow: 0 2px 3px #ccc;
}
.pay-container-left{
	width: 227px;
	height: 459px;
}
.pay-container-left img{
	width: 100%;
	height: 100%;
}
.pay-container-right{
	flex: 1;
	height: 100%;
	padding: 40px 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
.pay-container-right-title{
	width: 100%;
	padding: 0 0 0 50px;
	box-sizing: border-box;
}
.pay-container-right-content{
	width: 200px;
	height: 200px;
	margin-top: 50px;
}
.pay-container-right-button{
	width: 100%;
	margin-top: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>